<template>
	<view class="view-box">
		<u-sticky bgColor="#161819">
			<view class="head">
				<ren-dropdown-filter :filterData="filterData" :defaultIndex="defaultIndex" @onSelected="ed">
				</ren-dropdown-filter>
				<u-tabs :current="cur" :lineWidth="75" :list="tabList" @click="tabChange" activeStyle="color: #0273df">
				</u-tabs>
			</view>
		</u-sticky>
		

		<view class="view">
			<block v-if="list.length">
				<view class="item card" v-for="(row, ind) in list" :key="ind" @click="toDetail(row)">
					<view class="title u-line-2">
						{{ row.desc }}
					</view>
					<view class="u-flex time">
						<view class="u-flex-fill w0">
							<text class="label">发生时间:</text>
							<text>{{ $u.date(row.start * 1000, 'yyyy-mm-dd hh:MM:ss') }}</text>
						</view>
						<view class="">
							<text class="label">持续时间:</text>
							<text>{{ row.stay || '-' }}</text>
						</view>
					</view>
					<view class="info u-flex u-flex-y-center">
						<view class="u-flex u-flex-xy-center info-item">
							<text class="label">级别:</text>
							<view class="alarm-level-1" v-if="row.level === 1">一般</view>
							<view class="alarm-level-2" v-if="row.level === 2">严重</view>
							<view class="alarm-level-3" v-if="row.level === 3">紧急</view>
							
							<!-- <u-tag text="一般" type="primary" size="mini" plain v-if="row.level === 1"></u-tag>
							<u-tag text="严重" type="warning" size="mini" plain v-if="row.level === 2"></u-tag>
							<u-tag text="紧急" type="error" size="mini" plain v-if="row.level === 3"></u-tag> -->
						</view>
						<view class="u-flex u-flex-y-center u-flex-fill info-item" style="margin-left: 24px;">
							<text class="label">状态:</text>
							<view class="alarm-level-1" v-if="row.status === 1">已恢复</view>
							<view class="alarm-level-2" v-if="row.status === 0">未恢复</view>
							<!-- <u-tag text="已恢复" type="success" size="mini" plain v-if="row.status === 1"></u-tag>
							<u-tag text="未恢复" type="error" size="mini" plain v-if="row.status === 0"></u-tag> -->
						</view>
						<view class="u-flex more u-flex-xy-center">
							<view class="">
								详情
							</view>
							<view class="">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</block>

			<block v-else>
				<u-empty mode="list" marginTop="100"></u-empty>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		genAlarms
	} from '@/mock/alarm'
	export default {
		data() {
			return {
				listAll: [],
				filterData: [
					[{
						text: '所有告警',
						value: 0
					}, {
						text: '紧急告警',
						value: 1
					}, {
						text: '紧急+严重告警',
						value: 2
					}],
					[{
						text: '近 1 小时',
						value: 0
					}, {
						text: '近 1 天',
						value: 1
					}, {
						text: '近 1 周',
						value: 2
					}, {
						text: '近 1 月',
						value: 3
					}]
				],
				defaultIndex: [0, 1],
				cur: 0,
				tabListName:['总数', '未恢复', '已恢复'],
				tabList: [{
					name: '总数'
				}, {
					name: '未恢复'
				}, {
					name: '已恢复'
				}],
				list: [],
				
			}
		},
		onLoad() {
			// console.log(genAlarms())
			// this.listAll = genAlarms()
			this.getList()
		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			// console.log('到底了')
		},
		methods: {
			ed(res) {
				let status = res[0][0].value
				let time = res[1][0].value
				
				this.filterList(status, time)
			},
			tabChange(e) {
				this.cur = e.index
				let list = [...this.listAll]
				switch (this.cur) {
					case 0:
						this.list = list;
						break;
					case 1:
						this.list = list.filter(v => v.status == 0);
						break;
					case 2:
						this.list = list.filter(v => v.status == 1);
						break;
				}
			},
			getList() {
				let list = genAlarms()
				this.listAll = [...list]
				// console.log(list)
				this.list = [...list]
				this.getDataInfo(list)
			},
			toDetail(row) {
				uni.navigateTo({
					url: './detail?id=' + row.id
				})
			},
			getDataInfo(list) {
				// 获取总数，未恢复数量，已恢复数量
				let totalAll = list.length
				let total0 = list.filter(v => v.status == 0).length
				let total1 = list.filter(v => v.status == 1).length
				this.tabList.forEach((v, i) => v.name = this.tabListName[i])
				if (totalAll) {
					this.tabList[0].name = this.tabListName[0] + ' ' + totalAll
				}
				if (total0) {
					this.tabList[1].name = this.tabListName[1] + ' ' + total0
				}
				if (total1) {
					this.tabList[2].name = this.tabListName[2] + ' ' + total1
				}
			},
			// 获取多久之前的时间戳
			getStmp() {
				let d = Math.round(+new Date() / 1000)
				let day = 60 * 60 * 24
				// return {
				// 	hour: d - 60*60,
				// 	day: d - day,
				// 	week: d - day*7,
				// 	month: d - day*30
				// }
				return [d - 60 * 60, d - day, d - day * 7, d - day * 30]
			},
			filterList(status = 0, time = 0) {
				let list = genAlarms()
				let t = this.getStmp()[time]
				if (time > -1) {
					list = list.filter(v => v.start > t)
				}
				switch (status) {
					case 1:
						list = list.filter(v => v.level == 3);
						break;
					case 2:
						list = list.filter(v => [2, 3].includes(v.level));
						break;
				}
				this.listAll = list
				this.list = list
				this.getDataInfo(this.listAll)
				this.tabChange({index: this.cur})
			}
		}
	}
</script>

<style lang="scss">
	.view {
		.item {
			.title {
				font-size: 14px;
			}

			.label {
				margin-right: 8px;
			}
			.alarm-level-1{
				border: 1px solid #07C160;
				border-radius: 2px;
				padding: 2px 4px;
				font-size: 12px;
				line-height: 12px;
				color:#07C160 ;
			}
			.alarm-level-2{
				border: 1px solid #FA9E3B;
				border-radius: 2px;
				padding: 2px 4px;
				font-size: 12px;
				line-height: 12px;
				color:#FA9E3B;
			}
			.alarm-level-3{
				border: 1px solid #FA5151;
				border-radius: 2px;
				padding: 2px 4px;
				font-size: 12px;
				line-height: 12px;
				color:#FA5151 ;
			}

			.time,
			.info {
				margin-top: 10px;
				font-size: 12px;
				line-height: 12px;
				color: $u-tips-color;
			}

			.info {}
		}
	}
</style>
